<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">主播管理</a>
        </li>
        <li class="active">主播列表</li>
    </ul>

</div>

<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
    <form method="post" name="queryForm" action="./bobo/getBoboer" id="queryForm">
        <div class="page-header">
            <div class="row" style="vertical-align: middle">
                <div class="col-xs-8" id="nav-search">
                    <div class="row input-group">
                                <div class="col-sm-4" style="padding-right:1px">
                                    <select name="platformId" class="form-control" onchange="doQuery(1)" id="platformId">
                                        <option value="0">全部平台</option>
                                        #foreach ($item in ${platforms})
                                            <option value="$item.platformId">$item.platformName</option>
                                        #end
                                    </select>
                                </div>
                                <div class="col-sm-5" style="padding-right:1px">
                                <input  type="text" name="queryString" id="queryString" value="$!queryString"
                                       class="form-control search-query" placeholder="用户名、昵称">
                                    </div>
                        <div class="col-sm-3">
                                <span  class="input-group-btn">
                                    <button type="button" onclick="doQuery(1)"
                                            class="btn btn-primary btn-sm">
                                        <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                        查询
                                    </button>
                                </span>
                            </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <a href="#modal-category" role="button" class="btn btn-sm btn-success"
                       onclick="$('#submitForm').clearForm();validator.resetForm();" href="#modal-category" data-toggle="modal">
                        <i class="ace-icon fa fa-pencil-square-o bigger-120 "></i>添加主播
                    </a>
                </div>
            </div>
        </div>
        <!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>昵称</th>
                        <th>喜欢数</th>
                        <th>手机号</th>
                        <!--<th>广告词</th>-->
                        <th>性别</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="user_list"></tbody>
                </table>
            </div>
            <!-- /.span -->
        </div>
        <div id="biuuu_city" style="margin: 5px;text-align: center"></div>
    </form>
    <!-- /.row -->
</div>
<!-- /.page-content -->
<div id="modal-category" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    用户信息
                </div>
            </div>
            <form class="form-horizontal" method="post" role="form" id="submitForm" action="./bobo/save">
                <input type="hidden" name="uid" id="uid" value="0"/>

                <div class="modal-body no-padding">
                    <div class="form-group" id="username_col">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 用户名 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="username" name="username"
                                   placeholder="请输入用户名..." class="col-xs-10"/>
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group" id="phone">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 手机号 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="phoneNumber" name="phoneNumber"
                                   placeholder="请输入手机号..." class="col-xs-10"/>
                        </div>
                    </div>
                    <!--div class="form-group" id="password_col">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 密码 </label>

                        <div class="col-sm-9  col-xs-12 ">
                            <input type="password" id="password" name="password"
                                   placeholder="请输入用户密码..." class="col-xs-10"/>
                        </div>
                    </div>
                    <div class="form-group" id="confirmPwd_col">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 确认密码 </label>

                        <div class="col-sm-9  col-xs-12 ">
                            <input type="password" id="confirmPwd" name="confirmPwd"
                                   placeholder="请输入确认密码..." class="col-xs-10"/>
                        </div>
                    </div-->
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 昵称 </label>

                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="nickname" name="nickname"
                                   placeholder="请输入昵称..." class="col-xs-10"/>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                        <!--<label class="col-sm-2 col-xs-12 control-label no-padding-right"> 公司名 </label>-->
                        <!--<div class="col-sm-9  col-xs-12 ">-->
                            <!--<input type="text" id="company" name="company"-->
                                   <!--placeholder="请输入公司名..." class="col-xs-10"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 头像 </label>

                        <div class="col-sm-4  col-xs-12 ">
                            <input type="file" name="avatarFile" id="avatarFile"/>
                            <!--<img id="avatar" style="display: none" />-->
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 性别 </label>

                        <div class="col-sm-9  col-xs-12 ">
                            <div class="col-sm-9" style="padding-top: 5px">
                                <label class="inline">
                                    <input name="gender" value="1" type="radio" class="ace">
                                    <span class="lbl middle"> 男</span>
                                </label>
                                &nbsp; &nbsp; &nbsp;
                                <label class="inline">
                                    <input name="gender" checked value="2" type="radio" class="ace">
                                    <span class="lbl middle"> 女</span>
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="space-4"></div>
                </div>

                <div class="modal-footer no-margin-top text-right">
                    <button class="btn btn-sm btn-success " type="submit">
                        <i class="ace-icon fa fa-check"></i>
                        提交
                    </button>
                    <!--&nbsp;&nbsp;-->
                    <!--<button class="btn btn-sm btn-default " data-dismiss="modal">-->
                    <!--<i class="ace-icon fa fa-times"></i>-->
                    <!--关闭-->
                    <!--</button>-->
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--<script type="text/javascript" src="$request.contextPath/res/assets/js/ace/elements.fileinput.js"></script>-->

<script type="text/javascript">
    var submitLock = false;
    var validator;
    //    var productId = '$productId';

    var options = {
        beforeSerialize:function() {
            if($('#avatarFile').val() == '') {
                $('#avatarFile').remove();
            }
        },
        beforeSubmit: function () {
            if (submitLock) {
                return false;
            }
            info('正在保存，请稍等...');
            submitLock = true;
            return true;
        },
        success: function (data) {
            submitLock = false;
            if (data.resultCode == 0) {
                succ('操作成功');
                $('#modal-category').modal('toggle');

                delay(function () {
                    //$('#modal-category').modal('hide');
                    load('./bobo/manager');
                }, 1000);
            } else {
                error(data.resultMsg);
            }
        },
        error: function (data) {
            submitLock = false;
            error('系统繁忙，请稍候重试');
        },
        dataType: 'json',
        type: 'POST',
        timeout: 50000
    };
    $(function () {
        validator = $("#submitForm").validate({
            errorElement: "em",
            errorPlacement: function (error, element) {
                element.after(error);
            },
            rules: {
                "username": {
                    required: true
                },
               /* "password": {
                    required: true
                },
                "confirmPwd": {
                    required: true,
                    equalTo: "#password"
                },*/
                "nickname": {
                    required: true
                },
                "gender": {
                    required: true
                }
            },
            messages: {
                "username": {
                    required: '请输入手机号'
                },
              /*  "password": {
                    required: '请输入密码'
                },
                "confirmPwd": {
                    required: '请输入确认密码',
                    equalTo:'您两次输入的密码不一致'
                },*/
                "nickname": {
                    required: '请输入昵称'
                },
                "gender": {
                    required: '请选择性别'
                }
            },
            submitHandler: function (form) {
                if (submitLock) {
                    return;
                }
                $(form).ajaxSubmit(options);
            }
        });

    });

    $('#avatarFile').ace_file_input({
        style: 'well',
        btn_choose: '选择头像',
        btn_change: null,
        no_icon: 'ace-icon fa fa-picture-o',
        thumbnail: 'large',
        droppable: true,
        allowExt: ['jpg', 'jpeg', 'png', 'gif'],
        allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
    });

    function showEditDialog(uid ,username , nickname, gender , phoneNumber, avatar) {
        validator.resetForm();
        $('#submitForm').clearForm();
        $('#submitForm').find('#uid').val(uid);
        $('#submitForm').find('[id*="_col"]').hide();
        $('#submitForm').find('#username').val(username);
        $('#submitForm').find('#phoneNumber').val(phoneNumber);
        $('#submitForm').find('#nickname').val(nickname);
        $( "#submitForm").find("input[name='gender'][value='"+gender+"']").prop('checked' , true);
        $( "#submitForm").find("#username").rules( "remove" );
       // $( "#submitForm").find("#password").rules( "remove" );
       // $( "#submitForm").find("#confirmPwd").rules( "remove" );
        $('#avatarFile').ace_file_input('show_file_list', [{type: 'image', name: avatar}]);
        $('#avatarFile').parent().find('img').css({width:'150px', height:'150px'}).show();
//        $('#avatarFile').ace_file_input('show_file_list', [{type: 'image', name: avatar, path: avatar , format:'image'}]);
        $('#modal-category').modal('show');
    }

    $(document).ready(function() {
        getPageData(1);
    });

    function doQuery() {
        getPageData(1);
    }

    function getPageData(curr){
        var brands;
        $.ajax({
            url: "./bobo/getBoboer",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 12,
                "query" : $("#queryString").val(),
                "platformId": $("#platformId").val(),
            },

            success: function (data) {
                brands = data["list"];
                laypage({
                    cont: 'biuuu_city',
                    pages: data['pages'],
                    curr: curr, //当前页
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getPageData(obj.curr);
                        }
                    }
                })

                var str = "";
                console.log(brands);
                for(var i in brands){
                    var kys = brands[i];
                    str += "<tr>";
                    str += "<td >"
                            + "<a href=\"javascript:void(0)\"  onclick=\"showEditDialog('"+kys['uid'] +"','"+kys['username']+"','"+kys['nickname']+"','"+kys['gender']+"','"+kys['phoneNumber']+"','"+kys['avatar']+"')\">"+ kys["nickname"] + "</a>"
                            + "<a style=\"float:right\" href=\"javascript:void(0)\"  onclick=\"load('./bobo/calendar?boId="+kys['uid'] +"')\"</a>"+'直播计划）'
                            + "<a style=\"float:right\" href=\"javascript:void(0)\"  onclick=\"addToIndex("+kys['uid']+")\"</a>"+'（加入首页精选|'
                            +"</td>";
                    str += "<td >" + kys['likeCnt'] + "</td>";
                    str += "<td >" + kys['phoneNumber'] + "</td>";
                    gender = "未知"
                    if(kys['gender']==1) {
                        gender = "男"
                    } else if (kys["gender"] == 2) {
                        gender = "女"
                    }
                    str += "<td >" + gender + "</td>";
                    //updatetime = new Date(kys['updatedTime'])
                    str += "<td >" + kys['createdTime'] + "</td>";
                    str += "<td >"
                    str += "<div class=\"action-buttons\">"
                            +"<a class=\"green\" href=\"#\""
                            +" onclick=\"showEditDialog('"+kys['uid'] +"','"+kys['username']+"','"+kys['nickname']+"','"+kys['gender']+"','"+kys['phoneNumber']+"','"+kys['avatar']+"')\" "
                            +"title=\"编辑\""
                            +"hideFocus=\"true\">"
                            +"<i class=\"ace-icon fa fa-pencil bigger-130\" hideFocus=\"true\"></i>"
                            +"</a>";

                    str += "<a class=\"red\" href=\"javascrip:void(0)\" onclick=\"deleteBobo("+kys['uid']+")\""
                            +"title=\"删除\">"
                            +"<i class=\"ace-icon fa fa-trash-o bigger-130\"></i>"
                            +"</a>"
                            +"</div>";

                    str += "</td>";
                    str += "</tr>";
                }
                //console.log(str);
                $("#user_list").html(str);
            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function deleteBobo(Id) {
        confirm('确认删除?', function () {
            $.ajax({
                type: "GET",
                url: './bobo/delete',
                data: {uid: Id},
                success: function (data) {
                    if (data.resultCode == 0) {
                        succ('删除成功！');
                        getPageData(1);
                    } else {
                        error('删除失败！');
                    }
                },
                dataType: 'JSON'
            });
        });
    }

    function addToIndex(Id) {
        confirm('确认添加到主页精选?', function () {
            $.ajax({
                type: "GET",
                url: './bobo/AddToIndex',
                data: {boId: Id},
                success: function (data) {
                    if (data.resultCode == 0) {
                        succ('添加成功！');
                    } else {
                        error('添加失败！');
                    }
                },
                dataType: 'JSON'
            });
        });
    }
</script>